<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
    <link rel="stylesheet" type="text/css" href="./css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./css/easyui/icon.css">
    <script src="./js/jquery/jquery.min.js"></script>
    <script src="./js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom DataGrid Pager</h2>
<p>You can append some buttons to the standard datagrid pager bar.</p>
<div>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="redirectForm()">跳转测试页面</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="redirectForm2()">跳转测试页面2</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="redirectForm3()">跳转测试页面3</a>
</div>
<div style="margin:20px 0;"></div>
<table id="dg" title="Custom DataGrid Pager" style="width:100%;height:650px"
       data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/customer/getCustomers',method:'get',toolbar:'#tb'">
    <thead>
        <tr>
            <th data-options="field:'id',width:180,checkbox:true">ID</th>
            <th data-options="field:'customerName',width:300">客户姓名</th>
            <th data-options="field:'oddNumber',width:200,align:'right'">订单号</th>
            <th data-options="field:'context',width:200,align:'right'">文字</th>
            <th data-options="field:'prices',width:150,align:'right'">价格</th>
            <th data-options="field:'qrId',width:400,align:'center',formatter:operate_formatter">二维码信息</th>
<!--            <th data-options="field:'qrId',width:400,align:'center',formatter:operate_formatter">上传</th>-->
        </tr>
    </thead>
</table>
<div id="tb" style="padding:2px 5px;">
    Date From: <input class="easyui-datebox" style="width:110px">
    To: <input class="easyui-datebox" style="width:110px">
    Language:
    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
        <option value="java">Java</option>
        <option value="c">C</option>
        <option value="basic">Basic</option>
        <option value="perl">Perl</option>
        <option value="python">Python</option>
    </select>
    <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>

<div id="dlg2" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:300px;padding:10px"
     data-options="iconCls:'icon-save' ,toolbar:'#dlg-toolbar2' ,buttons:'#dlg-buttons2' ,closed:true">
</div>
<div id="dlg-toolbar2" style="padding:2px 0">
    <form id="ff" method="post" action="/customer/addCustomers">
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="customerName" label="CustomerName:" labelPosition="top"
                   data-options="prompt:'Enter a customer name...'" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="oddNumber" label="OddNumber:" labelPosition="top" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="context" label="Context:" labelPosition="top" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="prices" label="Prices:" labelPosition="top" style="width:100%;">
        </div>
    </form>
</div>
<div id="dlg-buttons2">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg2').dialog('close')">Close</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<script type="text/javascript">
    $(function(){
        var pager = $('#dg').datagrid().datagrid('getPager');
        pager.pagination({
            buttons:[{
                iconCls:'icon-add',
                handler:function(){
                    $('#dlg2').dialog('open');
                }
            },{
                iconCls:'icon-edit',
                handler:function(){
                    $('#dlg2').dialog('open');
                }
            }]
        });
    })
    function submitForm() {
        $('#ff').form('submit',{
            success: function(data){
                var data = eval('(' + data + ')');  // change the JSON string to javascript object
                console.log(data);
                if (data!=null){
                    location.reload();
                }
            }
        });
        $('#dlg2').dialog('close');
    }
    function operate_formatter(value, row, index) {
        var id = row.id;
        var context = row.context;
        if(context!=null && context!="" && context!=undefined){
            return "<a onclick='alertXX("+id+")' class='easyui-linkbutton'>生成二维码</a>";
        }
    }
    function alertXX(id) {
        $.ajax({
            url: "/customer/createQrCode", async: true, data:{"id":id}, success: function (data) {
                console.log(data);
                alert("二维码生成成功！path="+data);
            }
        });
    }
    // function operate_formatter(value, row, index) {
    //     alert("二维码生1526成成功！path=");
    //     var id = row.id;
    //     var context = row.context;
    //     if(context!=null && context!="" && context!=undefined){
    //         return "<a onclick='saveBlob("+id+")' class='easyui-linkbutton'>上传</a>";
    //     }
    // }
    // function saveBlob(id) {
    //     $.ajax({
    //         url: "/customer/saveBlob", async: true, data:{"id":id}, success: function (data) {
    //             console.log(data);
    //             alert("二维码生成成功！path="+data);
    //         }
    //     });
    // }



    function redirectForm() {
        // window.location.href="./test/aa.html";
        // location.href="./test/aa.html";
        window.open('./test/aa.html');
    }
    function redirectForm2() {
        window.open('./test/bb.html');
    }
    function redirectForm3() {
        window.open('./test/cc.html');
    }

</script>
</body>
</html>